<template>
    <div class="components-recommend-house-box ">
        <div class="container">
            <header class="clearfix">
                <p>房源推荐</p>
                <p>HOUSING</p>
            </header>
            <div class="recommend-house-box">
                <a-row :gutter="20" v-show="!noDataShow">
                    <a-col :span="6" v-for="(item, index) in RecommendHouseItem" :key="index">
                        <a-card :title="null" hoverable :loading="cardLoading">
                            <article>
                                <router-link :to="{path: '/EstateDetails', query: {EstateHouseId: item.id}}">
                                    <img v-lazy="item.photo" :title="item.title" :alt="item.title">
                                    <p class="webkit-text-overflow-1lines">{{ isNull0(item.title) }}</p>
                                </router-link>
                                <div class="bottom">
                                    <header>
                                        <span class="investmentType">{{ isNull0(item.investmentType) }}</span>
                                        <em>|</em>
                                        <span>{{ isNull0(item.projectType) }}</span>
                                        <em>|</em>
                                        <span>{{ isSplit_houseType(item.houseType) }}</span>
                                    </header>
                                    <p class="webkit-text-overflow-1lines">{{ isNull0(item.tags) }}</p>
                                    <aside class="webkit-text-overflow-1lines">
                                        <span class="price">{{ isCurrencySymbol(item.countryName) }}<i>{{ isNull0(item.price) }}</i>万 {{ isNull0_RMB(item.price, '万', isCurrency(item.countryName)) }}</span>
                                        <em>|</em>
                                        <span class="area">{{ isNull0(item.minArea) }}m²起</span>
                                    </aside>
                                </div>
                            </article>
                        </a-card>
                    </a-col>
                </a-row>
                <h5 style="text-align: center; padding: 15px;" v-show="noDataShow">暂未查询到数据！</h5>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                cardLoading: true,//卡片加载完成前会有文本块样式
                RecommendHouseItem: [],//推荐房源数据
                noDataShow: false,//没有数据提示信息是否显示

            }
        },
        computed: {},
        created() {
        },
        mounted() {
            // 获取推荐房源数据
            this.getRecommendHouseData();
        },
        methods: {
            // 获取推荐房源数据
            getRecommendHouseData() {
                this.$get('/house/search/1/8?field=sort&direction=asc&isRecommend=true').then(res => {
                    this.cardLoading = false;
                    if (res.status == 0) {
                        this.RecommendHouseItem = res.list;
                        this.noDataShow = false;
                    }else{
                        this.noDataShow = true;
                    }
                });
            },
        },
        components: {}
    }
</script>

<style lang="less" type="text/less">
    body {
        .components-recommend-house-box{
            padding: 50px 0;
            background: #fff;
            >.container{
                >header{
                    height: 70px;
                    background: url("/static/img/recommend-house-header.png") no-repeat center center;
                    background-size: 100%;
                    >p{
                        width: 50%;
                        font-size: 18px;
                    }
                    >p:first-of-type{
                        float: left;
                        text-align: right;
                    }
                    >p:last-of-type{
                        width: 48%;
                        float: right;
                        text-align: left;
                        margin: 35px 0 0 0;
                        font-family: -webkit-pictograph;
                    }
                }
                >.recommend-house-box{
                    margin: 15px 0 0 0;
                    .ant-card{
                        margin: 15px 0;
                        >.ant-card-body{
                            padding: 0;
                            >article{
                                >a{
                                    display: block;
                                    position: relative;
                                    cursor: pointer;
                                    overflow: hidden;
                                    >img{
                                        width: 100%;
                                        height: 186px;
                                        -webkit-transition: all linear 1s;
                                        -moz-transition: all linear 1s;
                                        transition: all linear 1s;
                                    }
                                    >p{
                                        width: 100%;
                                        position: absolute;
                                        bottom: 0;
                                        background: rgba(0,0,0,.4);
                                        font-size: 15px;
                                        color: #fff;
                                        padding: 0 0 0 15px;
                                    }
                                }
                                .bottom{
                                    padding: 15px 10px;
                                    >header{
                                        >span{
                                            font-size: 16px;
                                            font-weight: bold;
                                        }
                                        >em{
                                            margin: 0 5px;
                                        }
                                    }
                                    >p{
                                        font-size: 14px;
                                        color: #6b6b6b;
                                    }
                                    >aside{
                                        font-size: 14px;
                                        >span{
                                            font-weight: bold;
                                            font-family: "微软雅黑";
                                        }
                                        >span.price{
                                            >i{
                                                font-size: 18px;
                                                color: red;
                                            }
                                        }
                                    }
                                }
                            }
                            >article:hover{
                                >a {
                                    > img {
                                        -webkit-transform: scale(1.1, 1.1);
                                        -moz-transform: scale(1.1, 1.1);
                                        transform: scale(1.1, 1.1);
                                    }
                                }
                            }
                        }
                    }

                }
            }
        }
    }
</style>
